<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title>Title</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    input {
      width: 25px;
      height: 30px;
      border: 1px solid #cccccc;
      padding-left: 7px;
    }

    input:focus {
      border: 1px solid chartreuse;
    }

    .layer0 {
      position: fixed;
      width: 100%;
      height: 50%;
      top: 0;
      background-color: rgba(0, 0, 0, .1);
    }

    .layer {
      position: fixed;
      width: 100%;
      height: 50%;
      bottom: 0;
      background-color: rgba(0, 0, 0, .1);
    }
  </style>
</head>
<body>
  <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text">
  <div class="layer0"></div>
  <div class="layer"></div>
  <p>11</p>
  <p>21</p>
  <p>31</p>
  <p>41</p>
  <p>51</p>
  <p>61</p>
  <p>71</p>
  <p>81</p>
  <p>91</p>
  <p>101</p>
  <p>111</p>
  <p>121</p>
  <p>131</p>
  <p>141</p>
  <p>151</p>
  <p>161</p>
  <p>171</p>
  <p>181</p>
  <p>191</p>
  <p>201</p>
  <p>211</p>
  <p>221</p>
  <p>231</p>
  <p>241</p>
  <p>251</p>
  <p>261</p>
  <p>271</p>
  <p>281</p>
  <p>291</p>
  <p>301</p>
  <p>311</p>
  <p>321</p>
  <p>331</p>
  <p>341</p>
  <p>351</p>
  <p>361</p>
  <p>371</p>
  <p>381</p>
  <p>391</p>
  <p>401</p>
  <p>411</p>
  <p>421</p>
  <p>431</p>
  <p>441</p>
  <p>451</p>
  <p>461</p>
  <p>471</p>
  <p>481</p>
  <p>491</p>
  <p>501</p>
  <p>511</p>
  <p>521</p>
  <p>531</p>
  <p>541</p>
  <p>551</p>
  <p>561</p>
  <p>571</p>
  <p>581</p>
  <p>591</p>
  <p>601</p>
  <p>611</p>
  <p>621</p>
  <p>631</p>
  <p>641</p>
  <p>651</p>
  <p>661</p>
  <p>671</p>
  <p>681</p>
  <p>691</p>
  <p>701</p>
  <p>711</p>
  <p>721</p>
  <p>731</p>
  <p>741</p>
  <p>751</p>
  <p>761</p>
  <p>771</p>
  <p>781</p>
  <p>791</p>
  <p>801</p>
  <p>811</p>
  <p>821</p>
  <p>831</p>
  <p>841</p>
  <p>851</p>
  <p>861</p>
  <p>871</p>
  <p>881</p>
  <p>891</p>
  <p>901</p>
  <p>911</p>
  <p>921</p>
  <p>931</p>
  <p>941</p>
  <p>951</p>
  <p>961</p>
  <p>971</p>
  <p>981</p>
  <p>991</p>
  <p>1001</p>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    /*$('input').keyup(function () {
     $('input').eq($(this).index() + 1).focus()
     })*/
    var list = document.querySelectorAll('input')
    for (var i = 0; i < list.length; i++) {
      list[i].onkeyup = function () {
        list[i].onfocus()
      }
    }
  </script>
</body>
<script>
  document.querySelector('.layer0').onclick = function () {
    var target = document.body.scrollTop - window.screen.height
    start(target, -100)
  }
  document.querySelector('.layer').onclick = function () {
    var target = document.body.scrollTop + window.screen.height
    start(target, 100)
  }

  function start(target, speed) {
    var timer = null
    timer = setInterval(function () {
      if (speed > 0) {
        if (document.body.scrollTop <= target) {
          document.body.scrollTop += speed
        }
        if (document.body.scrollTop > target || document.body.scrollTop + window.screen.height >= document.body.scrollHeight) {
          clearInterval(timer)
          console.log(document.body.scrollTop)
        }
      } else {
        if (document.body.scrollTop >= target) {
          document.body.scrollTop += speed
        }
        if (document.body.scrollTop < target || document.body.scrollTop <= 0) {
          clearInterval(timer)
          console.log(document.body.scrollTop)
        }
      }


      /*if (document.body.scrollTop > target) {
       clearInterval(timer)
       console.log(1)
       } else {
       document.body.scrollTop = document.body.scrollTop + (speed)
       console.log(document.body.scrollTop)
       }*/
    }, 20)
  }


  /*var panel_tab_clone = $(".panel-tab").clone()
   var panel_tab_top = $(".panel-tab").offset().top
   var mod_wrap = $(".mod-wrap").slice(1, 7)
   var mod_height = []
   var scrollLeftWidth = 97
   var scrollLeft = []
   var $window = $(window)
   for (var i = 0; i < 10; i++) {
   scrollLeft.push(scrollLeftWidth * i)
   }
   scrollLeft.push()
   for (var i = 0; i < mod_wrap.length; i++) {
   mod_height.push(Math.round(mod_wrap.eq(i).offset().top) - 300)
   }
   $window.on('scroll', function () {
   if ($window.scrollTop() > panel_tab_top) {
   $(".panel-tab").after(panel_tab_clone)
   $(".panel-tab").eq(0).find(".clear > li").on('click',function (e) {
   e.preventDefault()
   $window.scrollTop(mod_height[$(this).index()] + 250 )
   })
   $(".panel-tab").eq(1).find(".clear > li").on('click',function (e) {
   e.preventDefault()
   $window.scrollTop(mod_height[$(this).index()] + 250)
   })
   $(".panel-tab").eq(1).show().css({
   position: 'fixed',
   top: 0,
   zIndex: 1000
   })
   } else {
   $(".panel-tab").eq(1).hide()
   }

   for (var i = 0; i < mod_height.length; i++) {
   if ($window.scrollTop() > mod_height[i]) {
   $(".panel-bg").css({
   left: scrollLeft[i] + 'px'
   })
   $(".panel-tab").eq(1).find(".clear > li").eq(i).addClass('on').siblings().removeClass('on')
   }
   }
   })
   $(window).scroll()*/
</script>
</html>
